<!-- 商品秒杀区组件 -->
<template>
  <div class="limit-content">
    <div class="seckill">
      <div class="seckill-top">
        <div class="top-header">
          <div class="img">
            <img src="@/assets/image/03.png" alt="" />
          </div>
          <div class="data">
            <div class="data-text">距结束还剩:</div>
            <div class="data-time">
              <span v-text="hours < 10 ? '0' + hours : hours"></span>
              <span>:</span>
              <span v-text="mins < 10 ? '0' + mins : mins"></span>
              <span>:</span>
              <span v-text="secs < 10 ? '0' + secs : secs"></span>
            </div>
          </div>
        </div>
        <div class="top-time">
          <div
            class="item"
            :class="activeindex == index ? 'active' : 'item'"
            v-for="(times, index) in limitData.time_list"
            :key="times.id"
            @click="changeTabs(times.id, index)"
          >
            <strong v-text="times.title"></strong>
            <span v-if="times.status">抢购中</span>
            <span v-else>即将开始</span>
          </div>
        </div>
        <div class="seckill-middle">
          <div class="swiper-commodity seck-mid">
            <ul class="swiper-wrapper">
              <li
                class="swiper-slide"
                v-for="lists in limitData.seckill_list"
                :key="lists.id"
              >
                <div class="goods-top">
                  <div class="top-img">
                    <img :src="lists.goods_thumb" alt="" />
                  </div>
                  <div class="tagicon">
                    <img src="@/assets/image/05.png" alt="" />
                  </div>
                </div>
                <div class="goods-bom">
                  <div class="bom-name" v-text="lists.goods_name"></div>
                  <div class="bom-price">
                    <div v-text="lists.sec_price_formated"></div>
                  </div>
                  <div class="bom-price">
                    <div v-text="lists.market_price_formated"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="seckill-bottom">
          <strong>查看更多秒杀商品</strong>
          <span class="iconfont icon-shangxiazuoyou-2"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["limitData"],
  data() {
    //这里存放数据
    return {
      activeindex: 0,
      hours: "00",
      mins: "00",
      secs: "00",
      timer: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    limitime() {
      var nowtime = new Date();
      var targettime =
        new Date(
          nowtime.getFullYear(),
          nowtime.getMonth(),
          nowtime.getDate(),
          23,
          59,
          59
        ).getTime() + 1000;
      var otime = (targettime - nowtime) / 1000;
      this.hours = Math.floor(otime / 3600);
      this.mins = Math.floor((otime % 3600) / 60);
      this.secs = Math.floor(otime % 60);
    },
    changeTabs(id, index) {
      this.activeindex = index;
      this.$store.dispatch("ActchangelimitData", { id: id });
    },
  },
  mounted() {
    this.timer = setInterval(this.limitime, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less">
.limit-content {
  .seckill {
    background-color: #fff;
    margin: 12px 12px 0;
    border-radius: 12px;

    .seckill-top {
      .top-header {
        padding: 20px 12px 15px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .img {
          width: 100px;
          padding: 0;

          img {
            width: 100%;
          }
        }

        .data {
          display: flex;
          font-size: 13px;
          align-items: center;

          .data-text {
            margin-right: 8px;
          }

          .data-time {
            span {
              &:nth-child(odd) {
                padding: 0.2rem 0.3rem;
                background: linear-gradient(-88deg, #ff4f2e, #f91f28);
                color: #fff;
                border-radius: 0.5rem;
              }

              &:nth-child(even) {
                color: #f20d23;
                font-weight: 700;
                margin: 0 5px;
              }
            }
          }
        }
      }

      .top-time {
        display: flex;
        padding: 10px 0;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #999;
          position: relative;
          flex: 1;
          padding-bottom: 0.8rem;

          strong {
            font-size: 13px;
            font-weight: 700;
          }

          span {
            font-size: 12px;
            margin-top: 3px;
          }

          &:after {
            content: "";
            position: absolute;
            height: 1px;
            background-color: #eee;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }

        .active {
          color: #f20d28;

          strong {
            font-size: 18px;
            font-weight: 600;
          }

          span {
            font-size: 14px;
            margin-top: 0px;
          }

          &:after {
            background-color: #f20d28;
            height: 2px;
            left: 12px;
            right: 12px;
          }
        }
      }
    }

    .seckill-middle {
      overflow-x: auto;
      height: 18rem;
      padding: 1rem;

      .seck-mid {
        position: relative;

        .swiper-wrapper {
          position: absolute;
          display: flex;

          .swiper-slide {
            padding: 0.5rem 0.3rem;
            width: 11rem;

            .goods-top {
              position: relative;
              .top-img {
                width: 11rem;
                img {
                  width: 100%;
                }
              }

              .tagicon {
                position: absolute;
                top: 0;
                left: 0;
                width: 4rem;

                img {
                  width: 100%;
                }
              }
            }

            .goods-bom {
              display: flex;
              flex-direction: column;
              text-align: center;

              .bom-name {
                height: 1.5rem;
                font-size: 13px;
                color: #000;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .bom-price {
                margin-top: 1px;
                font-size: 13px;
                font-weight: 700;
                display: inline-block;
                color: rgb(242, 14, 40);

                &:last-child {
                  font-size: 10.5px;
                  font-weight: 500;
                  color: rgb(136, 136, 136);
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }
    }

    .seckill-bottom {
      padding-bottom: 2rem;
      text-align: center;

      strong {
        font-size: 1.2rem;
        color: #000;
        margin-right: 0.5rem;
      }

      span {
        font-size: 1.3rem;
      }
    }
  }
}
</style>